<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>MediaStream</title>
</head>
<body style="text-align: center;">

	<video id="player"  controls autoplay playsinline style="width:300;height: 300;"></video>
	<audio id="audioPlayer" controls autoplay></audio>

</body>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>


<script>
	
'use strict'

//获取video标签
var videoplay = document.querySelector("video#player")
//获取audio标签
var audioplay = document.querySelector("audio#audioPlayer")



if (!navigator.mediaDevices || 
	!navigator.mediaDevices.getUserMedia) {
	console.log('getUserMedia is not supported!');
}else{
	navigator.mediaDevices.getUserMedia({video:{
		width:320,
		height:320
	},audio:true})
	.then((stream)=>{
		//stream中包含了视频轨和音频轨
		videoplay.srcObject=stream //视频标签源设置
		audioplay.srcObject=stream //音频标签源设置

	})
	.catch((error)=>{

		console.log('getUserMedia error:', error)
	});
}

</script>
</html>